<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>任务管理器 - Electron Vite Knex SQLite3</title>
  <link rel="stylesheet" href="./src/main.css" />
  <link rel="stylesheet" href="./src/update-styles.css" />
</head>
<body>
  <div id="app">
    <header class="header">
      <h1>任务管理器</h1>
      <p>基于 Electron + Vite + Knex + SQLite3 构建</p>
      <div class="header-actions">
        <button class="update-button" id="checkUpdateBtn" title="检查更新">
          <span>🔄</span>
          <span>检查更新</span>
        </button>
        <div class="update-status" id="updateStatus" style="display: none;">
          <span id="updateStatusText">检查中...</span>
        </div>
      </div>
    </header>

    <main class="main">
      <!-- 用户信息面板 -->
      <section class="user-panel">
        <h2>用户管理</h2>
        <div class="users-list" id="usersList">
          <!-- 用户列表将在这里动态加载 -->
        </div>
        <button class="btn btn-primary" id="addUserBtn">添加用户</button>
      </section>

      <!-- 任务管理面板 -->
      <section class="task-panel">
        <h2>任务管理</h2>
        <div class="task-controls">
          <select id="userFilter" class="select">
            <option value="">所有用户</option>
          </select>
          <button class="btn btn-primary" id="addTaskBtn">添加任务</button>
        </div>
        <div class="tasks-list" id="tasksList">
          <!-- 任务列表将在这里动态加载 -->
        </div>
      </section>
    </main>

    <!-- 添加用户模态框 -->
    <div id="userModal" class="modal" style="display: none;">
      <div class="modal-content">
        <div class="modal-header">
          <h3>添加用户</h3>
          <span class="close" id="closeUserModal">&times;</span>
        </div>
        <form id="userForm">
          <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required />
          </div>
          <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required />
          </div>
          <div class="form-group">
            <label for="firstName">名字:</label>
            <input type="text" id="firstName" name="firstName" />
          </div>
          <div class="form-group">
            <label for="lastName">姓氏:</label>
            <input type="text" id="lastName" name="lastName" />
          </div>
          <div class="form-actions">
            <button type="button" class="btn btn-secondary" id="cancelUserBtn">取消</button>
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 添加任务模态框 -->
    <div id="taskModal" class="modal" style="display: none;">
      <div class="modal-content">
        <div class="modal-header">
          <h3>添加任务</h3>
          <span class="close" id="closeTaskModal">&times;</span>
        </div>
        <form id="taskForm">
          <div class="form-group">
            <label for="taskTitle">任务标题:</label>
            <input type="text" id="taskTitle" name="title" required />
          </div>
          <div class="form-group">
            <label for="taskDescription">任务描述:</label>
            <textarea id="taskDescription" name="description" rows="3"></textarea>
          </div>
          <div class="form-group">
            <label for="taskUser">分配给:</label>
            <select id="taskUser" name="user_id" required>
              <option value="">选择用户</option>
            </select>
          </div>
          <div class="form-group">
            <label for="taskPriority">优先级:</label>
            <select id="taskPriority" name="priority">
              <option value="low">低</option>
              <option value="medium" selected>中</option>
              <option value="high">高</option>
            </select>
          </div>
          <div class="form-group">
            <label for="taskDueDate">截止日期:</label>
            <input type="datetime-local" id="taskDueDate" name="due_date" />
          </div>
          <div class="form-actions">
            <button type="button" class="btn btn-secondary" id="cancelTaskBtn">取消</button>
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script type="module" src="./src/update-manager.js"></script>
  <script type="module" src="./src/main.js"></script>
</body>
</html>